<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				padding: 0px;
				margin: 0px;
			}
			
			ul {
				list-style: none;
			}
			
			.menu-list {
				width: 100%;
				height: 40px;
				background-color: #01204f;
				margin-top: 100px;
			}
			
			.menu-list ul {
				width: 984px;
				height: 40px;
				line-height: 40px;
				margin: 0 auto;
				position: relative;
			}
			
			.menu-list ul li {
				float: left;
				z-index: 5;
				position: relative;
			}
			
			.menu-list ul li a {
				color: #fff;
				text-decoration: none;
				display: block;
				height: 100%;
				font-size: 14px;
				line-height: 40px;
				font-weight: 700;
				padding: 0 10px;
				color: #fff;
				margin-right: 2px;
			}
			
			#mask {
				position: absolute;
				height: 40px;
				overflow: hidden;
				background: #c00;
			}
			
			.active {
				background: #c00;
			}
		</style>
	</head>

	<body>
		<div class="menu-list">
			<ul>
				<div id="mask"></div>
				<li>
					<a href="#" class="active">首页</a>
				</li>
				<li>
					<a href="#">百家号</a>
				</li>
				<li>
					<a href="#">国内</a>
				</li>
				<li>
					<a href="#">国际</a>
				</li>
				<li>
					<a href="#">军事</a>
				</li>
				<li>
					<a href="#">社会</a>
				</li>
				<li>
					<a href="#">财经</a>
				</li>
				<li>
					<a href="#">娱乐</a>
				</li>
				<li>
					<a href="#">体育</a>
				</li>
				<li>
					<a href="#">互联网</a>
				</li>
				<li>
					<a href="#">科技</a>
				</li>
				<li>
					<a href="#">游戏</a>
				</li>
				<li>
					<a href="#">时尚</a>
				</li>
				<li>
					<a href="#">女人</a>
				</li>
				<li>
					<a href="#">汽车</a>
				</li>
				<li>
					<a href="#">房产</a>
				</li>
				<li>
					<a href="#">个性推荐</a>
				</li>
			</ul>
		</div>
		<script>
			var lis = document.getElementsByTagName('li');
			var block = document.getElementById('mask');
			var timer = null;
			//封装加减速运动
			function move(obj, target) {
				var speed = 0;
				clearInterval(timer);
				timer = setInterval(function() {
					speed += (target - obj.offsetLeft) / 5;
					speed *= 0.66;
					if(Math.abs(speed) < 1 && Math.abs((obj.offsetLeft - target)) < 1) {
						clearInterval(timer);
						obj.style.left = target + "px";
					}
					obj.style.left = obj.offsetLeft + speed + "px";
				}, 50);
			}
			//以上为加减速运动
			for(var i = 0; i < lis.length; i++) {
				lis[i].onmouseover = function() {
					block.style.width = this.getElementsByTagName('a')[0].offsetWidth + "px";
					move(block, this.offsetLeft); 
				};
				lis[i].onmouseout = function() {
					block.style.width = lis[0].getElementsByTagName('a')[0].offsetWidth + "px";
					move(block, 0);
				};
			}
		</script>
	</body>

</html>